<script setup>
import {onMounted, reactive, ref} from "vue";
import PageComponent from "@/components/index/PageComponent.vue";
import {$ajax, apiUrl} from "@/utils/ajax";
import {useRoute} from "vue-router";
import {dayjs, ElMessage} from "element-plus";

const data = reactive([])
const loading = ref(false)
const pageSize = ref(100)
const total = ref(0)
const page = ref(1)
const dialogVisible = ref(false)
const route = useRoute()
const search = reactive({
  pack: "",
  state: ""
})
const handlData = (p) => {
  page.value = p
  loading.value = true
  $ajax.get(`${apiUrl}admin/supplier/codePage`, {
    params: {
      page: page.value,
      pageSize: pageSize.value,
      pid: route.params.id,
      pack: search.pack,
      state: search.state
    }
  }).then(({data: {result: {lst, total: tol}}}) => {
    data.splice(0, data.length, ...lst)
    total.value = tol
    loading.value = false
  }).catch(() => loading.value = false)
}
const qrcode = ref(null)
const showQrcode = ref(false)
const codeData = reactive({
  number: 0,
  pid: route.params.id,
  gid: null,
  last_time: 0
})
const productData = reactive([])
onMounted(() => {
  handlData(1)
  $ajax.get(`${apiUrl}admin/pack_bag/lst`).then(({data: {result}}) => {
    productData.splice(0, productData.length, ...result)
  })
})
const addCodes = () => {
  if (codeData.number < 1) return ElMessage.error('请输入数量')
  if (codeData.gid < 1) return ElMessage.error('请选择礼包')
  loading.value = true
  $ajax.post(`${apiUrl}admin/supplier/addCode`, codeData).then(() => {
    dialogVisible.value = false
    handlData(1)
  }).catch(() => loading.value = false)
}
const getQrcode = row => {
  // $ajax.get(`${apiUrl}admin/supplier/getCodeQrcode`, {params:{id:row.id}});
  qrcode.value = process.env.VUE_APP_QRCODE_URL + row.code
  showQrcode.value = true
}
const destroyCode = row => {
  $ajax.post(`${apiUrl}admin/supplier/destroy`, {id: row.id}).then(() => {
    handlData(page.value)
  })
}
</script>

<template>
  <div class="breadcrumb">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{name: 'supplier'}">代理商</el-breadcrumb-item>
      <el-breadcrumb-item>礼包码</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="search">
    <el-form inline>
      <el-form-item label="礼包">
        <el-select v-model="search.pack" placeholder="请选择礼包" style="width: 220px" @change="handlData(1)">
          <el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="领取状态">
        <el-radio-group v-model="search.state" @change="handlData(1)">
          <el-radio-button label="全部" value=""/>
          <el-radio-button label="未领取" value="1"/>
          <el-radio-button label="已领取" value="2"/>
          <el-radio-button label="已过期" value="3"/>
          <el-radio-button label="已作废" value="4"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogVisible=true">添加礼包码</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-table :data="data" v-loading="loading" height="70vh" border stripe size="small" class="table-data">
    <el-table-column prop="plate.name" label="代理商"/>
    <el-table-column prop="gift.name" label="礼包"/>
    <el-table-column prop="gift.name" label="有效期">
      <template #default="{row}">
        <el-text v-if="row.last_time === 0" type="info" size="small">长期有效</el-text>
        <el-text v-else type="info" size="small">{{
            dayjs(parseInt(row.last_time) * 1000).format("YYYY年MM月DD日")
          }}
        </el-text>
      </template>
    </el-table-column>
    <el-table-column prop="code" label="礼包码" width="120"/>
    <el-table-column prop="state" label="状态" align="center" width="120">
      <template #default="{row}">
        <el-text v-if="row.state === 1" type="primary" size="small">未领取</el-text>
        <el-text v-else-if="row.state === 5" type="info" size="small">已过期</el-text>
        <el-text v-else-if="row.state === 6" type="info" size="small">已作废</el-text>
        <el-text v-else type="success" size="small">已领取</el-text>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-button-group size="small">
          <el-button type="primary" link @click="getQrcode(row)">二维码</el-button>
          <el-button type="primary" link @click="destroyCode(row)" v-if="row.state !== 1 && row.state !== 5">作废
          </el-button>
        </el-button-group>
        <!--        <el-button type="primary" size="small">二维码</el-button>-->
      </template>
    </el-table-column>
  </el-table>
  <page-component :size="pageSize" :page="page" :total="total" @get-data="handlData"/>
  <el-dialog title="添加礼包码" v-model="dialogVisible" width="75%">
    <el-form :model="codeData" label-position="left" label-width="100px">
      <el-form-item label="礼包码数量">
        <el-input-number v-model="codeData.number" :min="1"/>
      </el-form-item>
      <el-form-item label="礼包">
        <el-select v-model="codeData.gid" placeholder="请选择礼包">
          <el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="有效期">
        <el-date-picker v-model="codeData.last_time" type="date" :editable="false" value-format="YYYY-MM-DD"/>
        <el-text type="info">不选择表示长期有效</el-text>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round class="edit-btn" :loading="loading" @click="addCodes">生成</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog title="二维码" v-model="showQrcode" width="450px">
    <div style="text-align: center">
      <el-image :src="qrcode"/>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
